<template>
  <div class="diplomacy-view">
    <!-- 外交概览 -->
    <div class="diplomacy-overview">
      <h2 class="section-title">
        <span class="title-icon">🤝</span>
        外交关系
      </h2>
      
      <div class="overview-stats">
        <StatCard
          title="已知文明"
          :value="knownCivilizations.length"
          icon="🌍"
          color="#00d4ff"
        />
        <StatCard
          title="盟友"
          :value="alliedCivilizations.length"
          icon="🤝"
          color="#00ff88"
        />
        <StatCard
          title="敌对"
          :value="hostileCivilizations.length"
          icon="⚔️"
          color="#ff6b6b"
        />
        <StatCard
          title="外交影响力"
          :value="formatNumber(totalInfluence)"
          icon="💫"
          color="#f59e0b"
        />
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 标签页导航 -->
        <div class="tab-nav">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            class="tab-btn"
            :class="{ active: activeTab === tab.id }"
            @click="activeTab = tab.id"
          >
            <span class="tab-icon">{{ tab.icon }}</span>
            <span class="tab-label">{{ tab.label }}</span>
          </button>
        </div>

        <!-- 文明列表 -->
        <div v-if="activeTab === 'civilizations'" class="civilizations-section">
          <div class="section-header">
            <h3>已知文明</h3>
            <div class="filter-controls">
              <select v-model="relationFilter" class="filter-select">
                <option value="all">全部关系</option>
                <option value="allied">盟友</option>
                <option value="friendly">友好</option>
                <option value="neutral">中立</option>
                <option value="hostile">敌对</option>
                <option value="war">战争</option>
              </select>
            </div>
          </div>

          <div class="civilizations-list">
            <div
              v-for="civ in filteredCivilizations"
              :key="civ.id"
              class="civilization-item"
              :class="{ selected: selectedCivilization?.id === civ.id }"
              @click="selectCivilization(civ)"
            >
              <div class="civ-header">
                <div class="civ-flag">{{ civ.flag }}</div>
                <div class="civ-info">
                  <div class="civ-name">{{ civ.name }}</div>
                  <div class="civ-type">{{ getCivilizationType(civ.type) }}</div>
                </div>
                <div class="civ-relation" :class="civ.relation">
                  {{ getRelationText(civ.relation) }}
                </div>
              </div>
              
              <div class="civ-stats">
                <div class="stat-item">
                  <span class="stat-icon">💪</span>
                  <span class="stat-label">军力:</span>
                  <span class="stat-value">{{ formatNumber(civ.militaryPower) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">💰</span>
                  <span class="stat-label">经济:</span>
                  <span class="stat-value">{{ formatNumber(civ.economicPower) }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-icon">🔬</span>
                  <span class="stat-label">科技:</span>
                  <span class="stat-value">{{ civ.techLevel }}</span>
                </div>
              </div>

              <div class="civ-opinion">
                <div class="opinion-label">对我方态度:</div>
                <div class="opinion-bar">
                  <div 
                    class="opinion-fill"
                    :class="getOpinionClass(civ.opinion)"
                    :style="{ width: `${Math.abs(civ.opinion)}%` }"
                  ></div>
                </div>
                <div class="opinion-value" :class="getOpinionClass(civ.opinion)">
                  {{ civ.opinion > 0 ? '+' : '' }}{{ civ.opinion }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 外交行动 -->
        <div v-if="activeTab === 'actions'" class="actions-section">
          <div class="section-header">
            <h3>外交行动</h3>
          </div>

          <div class="actions-list">
            <div
              v-for="action in availableActions"
              :key="action.id"
              class="action-item"
              :class="{ disabled: !action.available }"
              @click="performAction(action)"
            >
              <div class="action-icon">{{ action.icon }}</div>
              <div class="action-info">
                <div class="action-name">{{ action.name }}</div>
                <div class="action-description">{{ action.description }}</div>
                <div class="action-cost" v-if="action.cost">
                  消耗: {{ formatActionCost(action.cost) }}
                </div>
              </div>
              <div class="action-status">
                <div v-if="action.available" class="status-available">可用</div>
                <div v-else class="status-unavailable">{{ action.reason }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 贸易协议 -->
        <div v-if="activeTab === 'trade'" class="trade-section">
          <div class="section-header">
            <h3>贸易协议</h3>
            <button class="create-btn" @click="showTradeModal = true">
              <span class="btn-icon">📋</span>
              新协议
            </button>
          </div>

          <div class="trade-agreements">
            <div
              v-for="agreement in tradeAgreements"
              :key="agreement.id"
              class="agreement-item"
            >
              <div class="agreement-header">
                <div class="agreement-partner">
                  <span class="partner-flag">{{ agreement.partnerFlag }}</span>
                  <span class="partner-name">{{ agreement.partnerName }}</span>
                </div>
                <div class="agreement-status" :class="agreement.status">
                  {{ getAgreementStatusText(agreement.status) }}
                </div>
              </div>
              
              <div class="agreement-details">
                <div class="trade-flow">
                  <div class="export-section">
                    <div class="flow-title">我方出口:</div>
                    <div class="resource-list">
                      <div
                        v-for="resource in agreement.exports"
                        :key="resource.type"
                        class="resource-item"
                      >
                        <span class="resource-icon">{{ getResourceIcon(resource.type) }}</span>
                        <span class="resource-amount">{{ formatNumber(resource.amount) }}</span>
                        <span class="resource-price">{{ formatNumber(resource.price) }} 信用点</span>
                      </div>
                    </div>
                  </div>
                  
                  <div class="import-section">
                    <div class="flow-title">我方进口:</div>
                    <div class="resource-list">
                      <div
                        v-for="resource in agreement.imports"
                        :key="resource.type"
                        class="resource-item"
                      >
                        <span class="resource-icon">{{ getResourceIcon(resource.type) }}</span>
                        <span class="resource-amount">{{ formatNumber(resource.amount) }}</span>
                        <span class="resource-price">{{ formatNumber(resource.price) }} 信用点</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="agreement-profit">
                  <div class="profit-label">净收益:</div>
                  <div class="profit-value" :class="{ positive: agreement.netProfit > 0, negative: agreement.netProfit < 0 }">
                    {{ agreement.netProfit > 0 ? '+' : '' }}{{ formatNumber(agreement.netProfit) }} 信用点/月
                  </div>
                </div>
              </div>
              
              <div class="agreement-actions">
                <button class="action-btn" @click="modifyAgreement(agreement)">
                  <span class="btn-icon">✏️</span>
                  修改
                </button>
                <button class="action-btn danger" @click="cancelAgreement(agreement)">
                  <span class="btn-icon">❌</span>
                  取消
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 外交历史 -->
        <div v-if="activeTab === 'history'" class="history-section">
          <div class="section-header">
            <h3>外交历史</h3>
            <div class="filter-controls">
              <select v-model="historyFilter" class="filter-select">
                <option value="all">全部事件</option>
                <option value="treaties">条约签署</option>
                <option value="wars">战争宣言</option>
                <option value="trade">贸易协议</option>
                <option value="meetings">外交会晤</option>
              </select>
            </div>
          </div>

          <div class="history-timeline">
            <div
              v-for="event in filteredHistory"
              :key="event.id"
              class="history-event"
            >
              <div class="event-date">{{ formatDate(event.date) }}</div>
              <div class="event-content">
                <div class="event-icon">{{ event.icon }}</div>
                <div class="event-info">
                  <div class="event-title">{{ event.title }}</div>
                  <div class="event-description">{{ event.description }}</div>
                  <div class="event-participants">
                    参与方: {{ event.participants.join(', ') }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧详情面板 -->
      <div class="right-panel">
        <!-- 文明详情 -->
        <div v-if="activeTab === 'civilizations' && selectedCivilization" class="civilization-details">
          <div class="details-header">
            <div class="civ-title">
              <span class="civ-flag-large">{{ selectedCivilization.flag }}</span>
              <div class="civ-title-info">
                <h3>{{ selectedCivilization.name }}</h3>
                <div class="civ-subtitle">{{ getCivilizationType(selectedCivilization.type) }}</div>
              </div>
            </div>
            <div class="relation-badge" :class="selectedCivilization.relation">
              {{ getRelationText(selectedCivilization.relation) }}
            </div>
          </div>

          <div class="civ-info-sections">
            <!-- 基本信息 -->
            <div class="info-section">
              <h4>基本信息</h4>
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">政府类型:</span>
                  <span class="info-value">{{ selectedCivilization.government }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">首都:</span>
                  <span class="info-value">{{ selectedCivilization.capital }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">人口:</span>
                  <span class="info-value">{{ formatNumber(selectedCivilization.population) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">控制星系:</span>
                  <span class="info-value">{{ selectedCivilization.systems }}</span>
                </div>
              </div>
            </div>

            <!-- 实力评估 -->
            <div class="info-section">
              <h4>实力评估</h4>
              <div class="power-stats">
                <div class="power-stat">
                  <div class="stat-label">军事实力</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill military"
                      :style="{ width: `${(selectedCivilization.militaryPower / maxMilitaryPower) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ formatNumber(selectedCivilization.militaryPower) }}</div>
                </div>
                <div class="power-stat">
                  <div class="stat-label">经济实力</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill economic"
                      :style="{ width: `${(selectedCivilization.economicPower / maxEconomicPower) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ formatNumber(selectedCivilization.economicPower) }}</div>
                </div>
                <div class="power-stat">
                  <div class="stat-label">科技水平</div>
                  <div class="stat-bar">
                    <div 
                      class="stat-fill tech"
                      :style="{ width: `${(selectedCivilization.techLevel / 10) * 100}%` }"
                    ></div>
                  </div>
                  <div class="stat-number">{{ selectedCivilization.techLevel }}/10</div>
                </div>
              </div>
            </div>

            <!-- 外交态度 -->
            <div class="info-section">
              <h4>外交态度</h4>
              <div class="attitude-info">
                <div class="attitude-meter">
                  <div class="meter-label">总体态度</div>
                  <div class="meter-bar">
                    <div 
                      class="meter-fill"
                      :class="getOpinionClass(selectedCivilization.opinion)"
                      :style="{ 
                        width: `${Math.abs(selectedCivilization.opinion)}%`,
                        marginLeft: selectedCivilization.opinion < 0 ? `${100 + selectedCivilization.opinion}%` : '0'
                      }"
                    ></div>
                    <div class="meter-center"></div>
                  </div>
                  <div class="meter-value" :class="getOpinionClass(selectedCivilization.opinion)">
                    {{ selectedCivilization.opinion > 0 ? '+' : '' }}{{ selectedCivilization.opinion }}
                  </div>
                </div>
                
                <div class="attitude-factors">
                  <div class="factors-title">态度影响因素:</div>
                  <div class="factors-list">
                    <div
                      v-for="factor in selectedCivilization.attitudeFactors"
                      :key="factor.type"
                      class="factor-item"
                      :class="{ positive: factor.value > 0, negative: factor.value < 0 }"
                    >
                      <span class="factor-name">{{ factor.name }}</span>
                      <span class="factor-value">
                        {{ factor.value > 0 ? '+' : '' }}{{ factor.value }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 可用行动 -->
            <div class="info-section">
              <h4>可用外交行动</h4>
              <div class="available-actions">
                <button
                  v-for="action in getAvailableActionsForCiv(selectedCivilization)"
                  :key="action.id"
                  class="diplomatic-action-btn"
                  :class="{ disabled: !action.available }"
                  :disabled="!action.available"
                  @click="performDiplomaticAction(action, selectedCivilization)"
                >
                  <span class="action-icon">{{ action.icon }}</span>
                  <span class="action-text">{{ action.name }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他标签页的占位内容 -->
        <div v-else-if="activeTab !== 'civilizations'" class="placeholder-content">
          <div class="placeholder-icon">{{ getTabIcon(activeTab) }}</div>
          <div class="placeholder-text">
            {{ getTabPlaceholder(activeTab) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <!-- 贸易协议模态框 -->
    <div v-if="showTradeModal" class="modal-overlay" @click="showTradeModal = false">
      <div class="modal-content large" @click.stop>
        <div class="modal-header">
          <h3>创建贸易协议</h3>
          <button class="close-btn" @click="showTradeModal = false">✕</button>
        </div>
        <div class="modal-body">
          <p class="placeholder-text">贸易协议创建功能正在开发中...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useDiplomacyStore, useResourcesStore } from '@/stores'
import StatCard from '@/components/ui/StatCard.vue'

// 接口定义
interface Civilization {
  id: string
  name: string
  flag: string
  type: string
  relation: 'allied' | 'friendly' | 'neutral' | 'hostile' | 'war'
  opinion: number
  militaryPower: number
  economicPower: number
  techLevel: number
  government: string
  capital: string
  population: number
  systems: number
  attitudeFactors: AttitudeFactor[]
}

interface AttitudeFactor {
  type: string
  name: string
  value: number
}

interface DiplomaticAction {
  id: string
  name: string
  description: string
  icon: string
  available: boolean
  reason?: string
  cost?: ActionCost
}

interface ActionCost {
  influence?: number
  credits?: number
  resources?: Record<string, number>
}

interface TradeAgreement {
  id: string
  partnerName: string
  partnerFlag: string
  status: 'active' | 'pending' | 'expired'
  exports: TradeResource[]
  imports: TradeResource[]
  netProfit: number
}

interface TradeResource {
  type: string
  amount: number
  price: number
}

interface DiplomaticEvent {
  id: string
  date: number
  title: string
  description: string
  icon: string
  participants: string[]
  type: string
}

// 响应式数据
const diplomacyStore = useDiplomacyStore()
const resourcesStore = useResourcesStore()

const activeTab = ref('civilizations')
const selectedCivilization = ref<Civilization | null>(null)
const relationFilter = ref('all')
const historyFilter = ref('all')
const showTradeModal = ref(false)

// 标签页配置
const tabs = [
  { id: 'civilizations', label: '文明关系', icon: '🌍' },
  { id: 'actions', label: '外交行动', icon: '🤝' },
  { id: 'trade', label: '贸易协议', icon: '💰' },
  { id: 'history', label: '外交历史', icon: '📜' }
]

// 模拟数据
const civilizations = ref<Civilization[]>([
  {
    id: '1',
    name: '银河联邦',
    flag: '🌟',
    type: 'federation',
    relation: 'allied',
    opinion: 75,
    militaryPower: 8500,
    economicPower: 12000,
    techLevel: 8,
    government: '民主联邦',
    capital: '新地球',
    population: 45000000,
    systems: 12,
    attitudeFactors: [
      { type: 'trade', name: '贸易关系', value: 25 },
      { type: 'alliance', name: '同盟协议', value: 30 },
      { type: 'border', name: '边界争议', value: -10 },
      { type: 'ideology', name: '意识形态相近', value: 15 },
      { type: 'history', name: '历史友谊', value: 15 }
    ]
  },
  {
    id: '2',
    name: '克林贡帝国',
    flag: '⚔️',
    type: 'empire',
    relation: 'hostile',
    opinion: -45,
    militaryPower: 15000,
    economicPower: 6000,
    techLevel: 7,
    government: '军事帝国',
    capital: '克洛诺斯',
    population: 28000000,
    systems: 8,
    attitudeFactors: [
      { type: 'military', name: '军事威胁', value: -30 },
      { type: 'territory', name: '领土冲突', value: -25 },
      { type: 'ideology', name: '意识形态对立', value: -20 },
      { type: 'recent_conflict', name: '近期冲突', value: -15 },
      { type: 'respect', name: '实力认可', value: 25 },
      { type: 'honor', name: '荣誉代码', value: 20 }
    ]
  },
  {
    id: '3',
    name: '瓦肯科学院',
    flag: '🖖',
    type: 'republic',
    relation: 'friendly',
    opinion: 60,
    militaryPower: 4500,
    economicPower: 9000,
    techLevel: 9,
    government: '科学共和国',
    capital: '瓦肯星',
    population: 18000000,
    systems: 6,
    attitudeFactors: [
      { type: 'science', name: '科学合作', value: 35 },
      { type: 'peace', name: '和平理念', value: 25 },
      { type: 'logic', name: '逻辑思维', value: 15 },
      { type: 'trade', name: '技术贸易', value: 20 },
      { type: 'cultural', name: '文化差异', value: -10 },
      { type: 'emotion', name: '情感表达', value: -25 }
    ]
  }
])

const availableActions = ref<DiplomaticAction[]>([
  {
    id: 'declare_war',
    name: '宣战',
    description: '对选定文明宣战，开始军事冲突',
    icon: '⚔️',
    available: true,
    cost: { influence: 50 }
  },
  {
    id: 'propose_alliance',
    name: '提议结盟',
    description: '向友好文明提议建立军事同盟',
    icon: '🤝',
    available: false,
    reason: '需要友好关系'
  },
  {
    id: 'trade_agreement',
    name: '贸易协议',
    description: '建立或修改贸易协议',
    icon: '💰',
    available: true,
    cost: { influence: 20, credits: 1000 }
  },
  {
    id: 'non_aggression',
    name: '互不侵犯条约',
    description: '签署互不侵犯条约，保证和平',
    icon: '🕊️',
    available: true,
    cost: { influence: 30 }
  },
  {
    id: 'embassy',
    name: '建立大使馆',
    description: '在对方首都建立大使馆，改善关系',
    icon: '🏛️',
    available: true,
    cost: { influence: 25, credits: 5000 }
  },
  {
    id: 'gift',
    name: '赠送礼物',
    description: '向对方赠送资源或技术，改善关系',
    icon: '🎁',
    available: true,
    cost: { credits: 2000 }
  }
])

const tradeAgreements = ref<TradeAgreement[]>([
  {
    id: '1',
    partnerName: '银河联邦',
    partnerFlag: '🌟',
    status: 'active',
    exports: [
      { type: 'metals', amount: 1000, price: 2.5 },
      { type: 'crystals', amount: 500, price: 5.0 }
    ],
    imports: [
      { type: 'energy', amount: 2000, price: 1.8 },
      { type: 'research', amount: 100, price: 10.0 }
    ],
    netProfit: 1400
  },
  {
    id: '2',
    partnerName: '瓦肯科学院',
    partnerFlag: '🖖',
    status: 'active',
    exports: [
      { type: 'energy', amount: 800, price: 2.0 }
    ],
    imports: [
      { type: 'research', amount: 200, price: 8.0 }
    ],
    netProfit: -200
  }
])

const diplomaticHistory = ref<DiplomaticEvent[]>([
  {
    id: '1',
    date: Date.now() - 86400000 * 7,
    title: '贸易协议签署',
    description: '与银河联邦签署了新的贸易协议，增加了金属和水晶的出口',
    icon: '📋',
    participants: ['我方帝国', '银河联邦'],
    type: 'trade'
  },
  {
    id: '2',
    date: Date.now() - 86400000 * 15,
    title: '外交会晤',
    description: '与瓦肯科学院举行了高级别外交会晤，讨论科技合作事宜',
    icon: '🤝',
    participants: ['我方帝国', '瓦肯科学院'],
    type: 'meetings'
  },
  {
    id: '3',
    date: Date.now() - 86400000 * 30,
    title: '边界冲突',
    description: '与克林贡帝国在边界星系发生小规模冲突，关系恶化',
    icon: '⚔️',
    participants: ['我方帝国', '克林贡帝国'],
    type: 'wars'
  }
])

// 计算属性
const knownCivilizations = computed(() => civilizations.value)

const alliedCivilizations = computed(() => 
  civilizations.value.filter(civ => civ.relation === 'allied')
)

const hostileCivilizations = computed(() => 
  civilizations.value.filter(civ => civ.relation === 'hostile' || civ.relation === 'war')
)

const totalInfluence = computed(() => {
  // 模拟计算总外交影响力
  return 2500
})

const filteredCivilizations = computed(() => {
  if (relationFilter.value === 'all') {
    return civilizations.value
  }
  return civilizations.value.filter(civ => civ.relation === relationFilter.value)
})

const filteredHistory = computed(() => {
  if (historyFilter.value === 'all') {
    return diplomaticHistory.value
  }
  return diplomaticHistory.value.filter(event => event.type === historyFilter.value)
})

const maxMilitaryPower = computed(() => 
  Math.max(...civilizations.value.map(civ => civ.militaryPower))
)

const maxEconomicPower = computed(() => 
  Math.max(...civilizations.value.map(civ => civ.economicPower))
)

// 方法
function selectCivilization(civ: Civilization) {
  selectedCivilization.value = civ
}

function getCivilizationType(type: string): string {
  const typeMap: Record<string, string> = {
    federation: '联邦制',
    empire: '帝制',
    republic: '共和制',
    democracy: '民主制',
    autocracy: '专制',
    theocracy: '神权制'
  }
  return typeMap[type] || type
}

function getRelationText(relation: string): string {
  const relationMap: Record<string, string> = {
    allied: '盟友',
    friendly: '友好',
    neutral: '中立',
    hostile: '敌对',
    war: '战争'
  }
  return relationMap[relation] || relation
}

function getOpinionClass(opinion: number): string {
  if (opinion >= 50) return 'very-positive'
  if (opinion >= 20) return 'positive'
  if (opinion >= -20) return 'neutral'
  if (opinion >= -50) return 'negative'
  return 'very-negative'
}

function getResourceIcon(type: string): string {
  const iconMap: Record<string, string> = {
    energy: '⚡',
    metals: '🔩',
    crystals: '💎',
    credits: '💰',
    research: '🔬',
    influence: '💫'
  }
  return iconMap[type] || '📦'
}

function getAgreementStatusText(status: string): string {
  const statusMap: Record<string, string> = {
    active: '生效中',
    pending: '待批准',
    expired: '已过期'
  }
  return statusMap[status] || status
}

function getAvailableActionsForCiv(civ: Civilization): DiplomaticAction[] {
  // 根据文明关系返回可用的外交行动
  return availableActions.value.filter(action => {
    switch (action.id) {
      case 'declare_war':
        return civ.relation !== 'war' && civ.relation !== 'allied'
      case 'propose_alliance':
        return civ.relation === 'friendly' && civ.opinion >= 50
      case 'trade_agreement':
        return civ.relation !== 'war'
      case 'non_aggression':
        return civ.relation === 'neutral' || civ.relation === 'hostile'
      case 'embassy':
        return civ.relation !== 'war'
      case 'gift':
        return civ.relation !== 'war'
      default:
        return true
    }
  })
}

function getTabIcon(tabId: string): string {
  const tab = tabs.find(t => t.id === tabId)
  return tab?.icon || '📋'
}

function getTabPlaceholder(tabId: string): string {
  const placeholders: Record<string, string> = {
    actions: '选择一个文明以查看可用的外交行动',
    trade: '管理与其他文明的贸易协议',
    history: '查看外交事件的历史记录'
  }
  return placeholders[tabId] || '内容正在加载中...'
}

function formatNumber(num: number): string {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

function formatDate(timestamp: number): string {
  const date = new Date(timestamp)
  const now = new Date()
  const diffDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24))
  
  if (diffDays === 0) return '今天'
  if (diffDays === 1) return '昨天'
  if (diffDays < 7) return `${diffDays}天前`
  if (diffDays < 30) return `${Math.floor(diffDays / 7)}周前`
  return `${Math.floor(diffDays / 30)}个月前`
}

function formatActionCost(cost: ActionCost): string {
  const parts: string[] = []
  if (cost.influence) parts.push(`${cost.influence} 影响力`)
  if (cost.credits) parts.push(`${formatNumber(cost.credits)} 信用点`)
  if (cost.resources) {
    Object.entries(cost.resources).forEach(([type, amount]) => {
      parts.push(`${formatNumber(amount)} ${getResourceIcon(type)}`)
    })
  }
  return parts.join(', ')
}

function performAction(action: DiplomaticAction) {
  if (!action.available) return
  console.log('执行外交行动:', action.name)
}

function performDiplomaticAction(action: DiplomaticAction, civ: Civilization) {
  if (!action.available) return
  console.log('对', civ.name, '执行外交行动:', action.name)
}

function modifyAgreement(agreement: TradeAgreement) {
  console.log('修改贸易协议:', agreement.partnerName)
}

function cancelAgreement(agreement: TradeAgreement) {
  const index = tradeAgreements.value.findIndex(a => a.id === agreement.id)
  if (index !== -1) {
    tradeAgreements.value.splice(index, 1)
  }
}

onMounted(() => {
  // 初始化时选择第一个文明
  if (civilizations.value.length > 0) {
    selectedCivilization.value = civilizations.value[0]
  }
})
</script>

<style scoped>
.diplomacy-view {
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.diplomacy-overview {
  margin-bottom: 2rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
}

.title-icon {
  font-size: 1.75rem;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 600px;
}

.left-panel,
.right-panel {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
}

.tab-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.tab-btn.active {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
  color: #000000;
  border-color: #00d4ff;
}

.tab-icon {
  font-size: 1rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.filter-controls {
  display: flex;
  gap: 0.5rem;
}

.filter-select {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.875rem;
}

.create-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #00ff88, #00cc6a);
  color: #000000;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.create-btn:hover {
  background: linear-gradient(135deg, #00cc6a, #009954);
  transform: translateY(-1px);
}

.civilizations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
}

.civilization-item {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.civilization-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #00d4ff;
}

.civilization-item.selected {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

.civ-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.civ-flag {
  font-size: 2rem;
  min-width: 40px;
}

.civ-info {
  flex: 1;
}

.civ-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.civ-type {
  color: #cccccc;
  font-size: 0.875rem;
}

.civ-relation {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.civ-relation.allied {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.civ-relation.friendly {
  background: rgba(0, 212, 255, 0.2);
  color: #00d4ff;
}

.civ-relation.neutral {
  background: rgba(128, 128, 128, 0.2);
  color: #cccccc;
}

.civ-relation.hostile {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.civ-relation.war {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
}

.civ-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.stat-icon {
  font-size: 1rem;
}

.stat-label {
  color: #cccccc;
}

.stat-value {
  color: #ffffff;
  font-weight: 500;
}

.civ-opinion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.opinion-label {
  font-size: 0.875rem;
  color: #cccccc;
  min-width: 80px;
}

.opinion-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.opinion-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.opinion-fill.very-positive {
  background: linear-gradient(90deg, #00ff88, #00cc6a);
}

.opinion-fill.positive {
  background: linear-gradient(90deg, #00d4ff, #0099cc);
}

.opinion-fill.neutral {
  background: linear-gradient(90deg, #888888, #666666);
}

.opinion-fill.negative {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.opinion-fill.very-negative {
  background: linear-gradient(90deg, #ff6b6b, #ef4444);
}

.opinion-value {
  font-size: 0.875rem;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

.opinion-value.very-positive {
  color: #00ff88;
}

.opinion-value.positive {
  color: #00d4ff;
}

.opinion-value.neutral {
  color: #cccccc;
}

.opinion-value.negative {
  color: #f59e0b;
}

.opinion-value.very-negative {
  color: #ff6b6b;
}

.actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 500px;
  overflow-y: auto;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-item:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: #00d4ff;
}

.action-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-icon {
  font-size: 1.5rem;
  min-width: 30px;
}

.action-info {
  flex: 1;
}

.action-name {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.action-description {
  color: #cccccc;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.action-cost {
  color: #f59e0b;
  font-size: 0.875rem;
}

.action-status {
  text-align: right;
}

.status-available {
  color: #00ff88;
  font-weight: 500;
  font-size: 0.875rem;
}

.status-unavailable {
  color: #ff6b6b;
  font-size: 0.875rem;
}

.trade-agreements {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
}

.agreement-item {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.agreement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.agreement-partner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.partner-flag {
  font-size: 1.5rem;
}

.partner-name {
  font-weight: 600;
  color: #ffffff;
}

.agreement-status {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.agreement-status.active {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
}

.agreement-status.pending {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.agreement-status.expired {
  background: rgba(128, 128, 128, 0.2);
  color: #cccccc;
}

.agreement-details {
  margin-bottom: 1rem;
}

.trade-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.export-section,
.import-section {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.flow-title {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.resource-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.resource-icon {
  font-size: 1rem;
  min-width: 20px;
}

.resource-amount {
  color: #ffffff;
  font-weight: 500;
}

.resource-price {
  color: #f59e0b;
  margin-left: auto;
}

.agreement-profit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.profit-label {
  color: #cccccc;
  font-weight: 500;
}

.profit-value {
  font-weight: 600;
  font-size: 1.1rem;
}

.profit-value.positive {
  color: #00ff88;
}

.profit-value.negative {
  color: #ff6b6b;
}

.agreement-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.action-btn.danger {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.3);
  color: #ff6b6b;
}

.action-btn.danger:hover {
  background: rgba(255, 107, 107, 0.3);
}

.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
}

.history-event {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.event-date {
  min-width: 80px;
  color: #888888;
  font-size: 0.875rem;
  font-weight: 500;
}

.event-content {
  flex: 1;
  display: flex;
  gap: 1rem;
}

.event-icon {
  font-size: 1.5rem;
  min-width: 30px;
}

.event-info {
  flex: 1;
}

.event-title {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.event-description {
  color: #cccccc;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.event-participants {
  color: #888888;
  font-size: 0.875rem;
}

.civilization-details {
  max-height: 600px;
  overflow-y: auto;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.civ-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.civ-flag-large {
  font-size: 3rem;
}

.civ-title-info h3 {
  margin: 0 0 0.25rem 0;
  color: #ffffff;
  font-size: 1.5rem;
}

.civ-subtitle {
  color: #cccccc;
  font-size: 1rem;
}

.relation-badge {
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
}

.civ-info-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section h4 {
  margin: 0 0 1rem 0;
  color: #ffffff;
  font-size: 1.125rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.info-label {
  color: #cccccc;
}

.info-value {
  color: #ffffff;
  font-weight: 500;
}

.power-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.power-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-label {
  min-width: 80px;
  color: #cccccc;
  font-size: 0.875rem;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.stat-fill.military {
  background: linear-gradient(90deg, #ff6b6b, #ef4444);
}

.stat-fill.economic {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.stat-fill.tech {
  background: linear-gradient(90deg, #00d4ff, #0099cc);
}

.stat-number {
  min-width: 60px;
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

.attitude-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.attitude-meter {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.meter-label {
  color: #cccccc;
  font-size: 0.875rem;
}

.meter-bar {
  position: relative;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  transition: all 0.3s ease;
}

.meter-center {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

.meter-value {
  font-weight: 600;
  text-align: center;
}

.attitude-factors {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.factors-title {
  color: #cccccc;
  font-size: 0.875rem;
  font-weight: 600;
}

.factors-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.factor-item {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.875rem;
}

.factor-name {
  color: #cccccc;
}

.factor-value {
  font-weight: 500;
}

.factor-item.positive .factor-value {
  color: #00ff88;
}

.factor-item.negative .factor-value {
  color: #ff6b6b;
}

.available-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.diplomatic-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.diplomatic-action-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: #00d4ff;
}

.diplomatic-action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.diplomatic-action-btn .action-icon {
  font-size: 1.5rem;
}

.diplomatic-action-btn .action-text {
  font-size: 0.875rem;
  font-weight: 500;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.placeholder-text {
  color: #888888;
  font-size: 1.125rem;
  max-width: 300px;
  line-height: 1.5;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0;
  min-width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
}

.modal-content.large {
  min-width: 600px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.25rem;
}

.close-btn {
  background: none;
  border: none;
  color: #cccccc;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body .placeholder-text {
  text-align: center;
  color: #888888;
  font-style: italic;
  padding: 2rem;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .right-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .diplomacy-view {
    padding: 0.5rem;
  }
  
  .overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tab-nav {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1;
    min-width: 120px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .trade-flow {
    grid-template-columns: 1fr;
  }
  
  .available-actions {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    min-width: 300px;
    margin: 1rem;
  }
}

@media (max-width: 480px) {
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .civ-stats {
    grid-template-columns: 1fr;
  }
  
  .civ-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .details-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
</style>